<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form" %>  
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<html>
<head>
  <title>选择职能类别</title>
  <script src="${ctx}/static/helper/select-position-type-modal.js" type="text/javascript"></script>
  <style type="text/css">
    #select_position_type_modal {
      width: 800px;
      margin-left: -400px;
    }
    #select_position_type_modal .modal-body {
      max-height: 520px;
      padding-top: 0;
    }
    #select_position_type_modal label {
      margin-right: 5px;
      float: left;
    }
    .sub_title {
      width: 170px;
      margin: 10px 0 5px 0;
      padding-left: 10px;
      font-size: 16px;
      font-weight: bold;
    }
    .position_type_table {
      font-size: 12px;
    }
    .position_type_table .odd_row {
      background-color: #F6F6F6;
    }
    .position_type_table .position_type {
      width: 180px;
      padding: 2px 10px;
      cursor: pointer;
    }
    .position_type_table .position_type.hl {
      background-color: #ffa22e;
      color: #ffffff;
    }
    .level3_table {
      border: 1px solid #ff7b00;
      background-color: #feffef;
      position: absolute;
      top: 0;
      left: 0;
    }
    .level3_table .level3_td {
      height: 20px;
      padding-left: 7px;
      padding-right: 15px;
      background-color: #feffef;
      cursor: pointer;
    }
    .level3_table .level3_td.hl {
      background-color: #ffa22e;
      color: #000;
    }
  </style>
  <script>
  </script>
</head>
<body>
  <div class="modal-header">
    <div class="row">
      <div class="span8"><strong>请选择职能类别（您最多能选择<span>2</span>项）</strong></div>
      <a href="#" class="btn btn-primary" id="select_position_type_modal_ok">确定</a>
      <a href="#" class="btn btn-primary" id="select_position_type_modal_close">取消</a>
    </div>
    <div class="row">
      <div class="span2">已选职能类别：</div>
      <div class="span7" id="select_position_type_modal_selected"></div>
    </div>
  </div><!--Modal header-->
  <div class="modal-body">
    <table border="0" cellpadding="0" cellspacing="0" class="position_type_table">
      <c:set var="columnNumber" value="3" />
      <c:forEach items="${positionTypeTree}" var="level1" varStatus="status1">
      <tr<c:if test="${status1.index % 2 == 0}"> class="odd_row"</c:if>>
        <fmt:formatNumber value="${(fn:length(level1.subPositionTypes) - 1) / columnNumber}" pattern="#0" var="rowNumber"></fmt:formatNumber>
        <td rowspan="${rowNumber + 1}" class="sub_title">${level1.name}</td>
        <c:forEach items="${level1.subPositionTypes}" var="level2" varStatus="status2">
        <td class="position_type" l2_id="${level2.id}">${level2.name}</td>
      <c:if test="${status2.count % columnNumber eq 0}"></tr><tr<c:if test="${status1.index % 2 == 0}"> class="odd_row"</c:if>></c:if>
        </c:forEach>
        <c:if test="${fn:length(level1.subPositionTypes) % columnNumber ne 0}"><td colspan="${columnNumber - fn:length(level1.subPositionTypes) % columnNumber}"></td></c:if>
      </tr>
      </c:forEach>
    </table>
    <c:set var="columnNumber" value="2" />
    <c:forEach items="${positionTypeTree}" var="level1">
      <c:forEach items="${level1.subPositionTypes}" var="level2">
    <table id="_l2${level2.id}" cellpadding="0" cellspacing="0" class="position_type_table level3_table hide">
      <tr>
        <td colspan="2" class="level3_td"><label class="checkbox"><input type="checkbox" value="${level2.id}"> <strong>${level2.name}</strong></label></td>
      </tr>
      <tr>
        <c:forEach items="${level2.subPositionTypes}" var="level3" varStatus="status">
        <td class="level3_td"><label class="checkbox"><input type="checkbox" value="${level3.id}"> ${level3.name}</label></td>
      <c:if test="${status.count % columnNumber eq 0 and status.count != fn:length(level2.subPositionTypes)}"></tr><tr></c:if>
        </c:forEach>
        <c:if test="${fn:length(level2.subPositionTypes) % columnNumber ne 0}"><td><label></label></td></c:if>
      </tr>
    </table>
      </c:forEach>
    </c:forEach>
  </div><!--Modal body-->
</body>
</html>